<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>qpimg sample</title>
<link href="sample.css" rel="stylesheet" type="text/css" />
<link href="{qpimg_css_source map='main' }" rel="stylesheet" type="text/css" />
</head>

<body><div align="center">

<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="400">
<tr>
    <td class="decor {qpimg_obj_class map='main' obj='form1' }">&nbsp;</td>
    <td class="decor {qpimg_obj_class map='horiz' obj='form2' }">&nbsp;</td>
    <td class="decor {qpimg_obj_class map='main' obj='form3' }">&nbsp;</td>
</tr>

<tr valign="top">
    <td class="decor {qpimg_obj_class map='vert' obj='form4' }">&nbsp;</td>
    <td>
        <div><img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='logo' }" alt="qpimg" /></div>

        <div class="light">Комбинирование изображений и создание css-спрайтов налету.</div>

        <div class="list">
            <ul class="mylist">
                <li>Пример</li>
                <li>демонстрирующий работу</li>
                <li>qpimg</li>
            </ul>
        </div>
        
        <div align="center">
            <img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='i1' }" alt="item" />
            <img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='i2' }" alt="item" />
            <img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='i3' }" alt="item" />
            <img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='i4' }" alt="item" />
            <img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='i5' }" alt="item" />
            <img src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='i6' }" alt="item" />
        </div>

        <br />

        <div align="center">
            <a href="http://www.qpimg.com/" target="_blank" 
                onmouseover="document.getElementById('button').className='{qpimg_obj_class map='main' obj='button_over' }'"
                onmouseout="document.getElementById('button').className='{qpimg_obj_class map='main' obj='button' }'"
                ><img id="button" src="{qpimg_empty_image_src}" class="{qpimg_obj_class map='main' obj='button' }" alt="button" /></a>
        </div>

        <br />

        <div class="light">
            В результате <u>18 изображений</u> преобразованы в:<br />
            - 3 спрайта (изображения);<br />
            - 1 css-файл;<br />
            - 1 empty-изображение (прозрачное изображение).
        </div>

        <br />
    </td>
    <td class="decor {qpimg_obj_class map='vert' obj='form6' }">&nbsp;</td>
</tr>

<tr>
    <td class="decor {qpimg_obj_class map='main' obj='form7' }">&nbsp;</td>
    <td class="decor {qpimg_obj_class map='horiz' obj='form8' }">&nbsp;</td>
    <td class="decor {qpimg_obj_class map='main' obj='form9' }">&nbsp;</td>
</tr>
</table>

</div></body>

</html>
